<style>

    .layui-table-cell {            overflow: visible !important;        }
    /* 使得下拉框与单元格刚好合适 */
    td .layui-form-select{
        margin-top: -4px;
        margin-left: -15px;
        margin-right: 0;
    }
    td .layui-edge{
        right: 0 !important;
    }
    .choose-link{
        width: inherit;
    }

    .text-left{
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
</style>
<div class="oracleDataUploadModel">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">已保存连接</li>
            <li>新建连接</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show hasConnect">
                <form class="layui-form model-form layui-row">
                    <div class="layui-inline layui-row">
                        <label class="layui-form-label choose-link">选择连接</label>
                        <div class="layui-input-block">
                            <select name="lianjie" lay-filter="dblink-select" id="dblink-select">
                            </select>
                        </div>
                        <button class="layui-btn layui-btn-danger layui-btn-sm delete-btn" id="delete-dblink" type="button" lay-submit>删除</button>
                    </div>
                    <div class="layui-form-item text-left">
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" ew-event="closePageDialog">取消</button>
                        <button class="layui-btn layui-btn-sm" lay-filter="open-dialog" lay-submit >设置关联数据库</button>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form model-form layui-row">
                    <div class="layui-inline layui-row">
                        <label class="layui-form-label">IP地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="ip" required  lay-verify="required" placeholder="请输入IP地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-row">
                        <label class="layui-form-label">端口</label>
                        <div class="layui-input-block">
                            <input type="text" name="port" required  lay-verify="required" placeholder="请输入端口" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-row">
                        <label class="layui-form-label">实例名</label>
                        <div class="layui-input-block">
                            <input type="text" name="sid" required  lay-verify="required" placeholder="请输入实例名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-row">
                        <label class="layui-form-label">唯一标识</label>
                        <div class="layui-input-block">
                            <input type="text" name="linkname" required  lay-verify="required" placeholder="请输入唯一标识" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-row">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-row">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea name="memo" placeholder="请输入备注信息" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item text-left">
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" ew-event="closePageDialog">取消</button>
                        <button class="layui-btn layui-btn-sm" lay-filter="subOracleData" lay-submit>设置关联数据库</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


</div>
<!--渲染指标数据类型-->
<script type="text/tmpl" id="template-link-tmpl">
    <option value="请选择"></option>
     {{each data}}
        <option value="{{$value.id}}">{{$value.linkname}}</option>

    {{/each}}

</script>

<!-- 设置表格 -->
<script type="text/html" id="search-tables">
    <form id="setMasterSlaveClassForm" lay-filter="versionGroupForm" class="layui-form layui-row model-form">
        <div class="layui-form-item">
            <label class="layui-form-label">选择表</label>
            <div class="layui-input-block">
                <select name="parid" placeholder="请选择" id="db_tables" lay-filter="db_tables">

                </select>
            </div>
            <table class="layui-table" id="getIdenTable" lay-filter="getIdenTable" lay-skin="nob"></table>
        </div>
        <div class="layui-form-item text-right ">
            <button class="layui-btn layui-btn-sm" lay-filter="sendRelationtable" lay-submit >创建关联表</button>
            <button class="layui-btn layui-btn-sm" lay-filter="sendView" lay-submit >创建视图</button>
        </div>
    </form>

</script>
<!-- 设置数据库列表 -->
<script type="text/html" id="oracle-list">
    <form id="oracleList" lay-filter="oracleList" class="layui-form layui-row model-form">

        <div class="layui-form-item text-right ">
            <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn layui-btn-sm" lay-filter="setOracleList" lay-submit>确定</button>
        </div>
    </form>

</script>
<!--渲染报告期类型-->
<script type="text/tmpl" id="template-db-tables-tmpl">
    <option value=""></option>
     {{each data}}
        <option value="{{$value.tablename}}">{{$value.tablename}}</option>
    {{/each}}

</script>
<!-- 分组表格操作列DOM -->
<script id="ident-template-idenData-box">
</script>
<script type="text/tmpl" id="ident-template-idenData-tmp">
<!--渲染对象分类-->
        <div class="select_orcale_box">
            <a lay-data="{field:'tablefieldName'}" class="layui-btn layui-btn-xs layui-btn-warning" lay-event="edit" name="tablefieldName">编辑</a>
        </div>
</script>
<script type="text/tmpl" id="ident-select-orcale-tmp">
        <select name="parid" placeholder="请选择" lay-filter="select_oracle">
            {{each new_arr}}
                <option value="{{$value.field}}">{{$value.field}}</option>
            {{/each}}
        </select>
</script>
<script>
    layui.use(['layer', 'form', 'admin','element','table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var table = layui.table;
        var Authorization;
        var current_link;
        var current = 1;
        var file_name;
        var dbLink_id;
        var select_arr;
        var sendArr = [];
        var allData = [];
        var page_box = []
        var tableName;
        var nowOracleData;
        var urlData = window.mSelUser;  // 列表页面传递的数据，也可以使用top.xxx
        var userInfo = getAuthority();
        //获取权限方法
        if(userInfo){
            var access_token = localStorage.getExpire("access_token");
            var token_type = localStorage.getExpire("token_type");
            Authorization = token_type+" "+access_token;
            getLinkList();
        }
        /*渲染数据表表格里的权限*/
        function getTemplateIdenManageTablePower() {
            var str = template("ident-template-idenManage-tmp",{});
            document.getElementById("ident-template-idenData-box").innerHTML = str;
        }
        // 表格工具条点击事件
        table.on('tool(getIdenTable)', function (obj) {
            let i = obj.tr[0].rowIndex

            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
                let new_arr =  $.extend(true, [], select_arr)
                let tableNames = [];
                $.each(allData,function (index,item) {
                    if(item.tablefieldName){
                        tableNames.push(item.tablefieldName)
                    }
                })
                for(let i=0;i<tableNames.length;i++){
                    for (let j =0;j<new_arr.length;j++){
                        if(tableNames[i] == new_arr[j].field){
                            new_arr.splice(j,1);
                        }
                    }
                }
                let str =  template("ident-select-orcale-tmp",{new_arr});
                $($(".select_orcale_box")[i]).html(str)
                form.render('select')
                form.on('select(select_oracle)', function(data){
                    for(let i=0;i<allData.length;i++){
                        if(obj.data.id == allData[i].id){
                            allData[i].tablefieldName = data.value;
                        }
                    }
                    renderTable(allData)
                });
            }else if(layEvent === 'delete'){
                for(let i=0;i<allData.length;i++){
                    if(obj.data.id == allData[i].id){
                        allData[i].tablefieldName = "";
                    }
                }
                renderTable(allData)
            }
        });
        $('#delete-dblink').click(function () {
            if(current_link){
                layer.confirm('确定将永久删除目录“ XX”吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    layer.load(2);
                    axios({
                        method: 'delete',
                        url:microUrl.microObject.idenDbLink.deleteDbLink + current_link,
                        headers:{
                            'Authorization':Authorization
                        }
                    })
                        .then(function (res) {
                            if (res.status == 200&&res.data.message=="success") {
                                layer.closeAll('loading');
                                layer.msg("删除成功", {icon: 1});
                            } else {
                                layer.msg(res.data.message, {icon: 2});
                                layer.closeAll('loading');
                            }
                            getLinkList();
                        })
                        .catch(function (error) {
                            console.log(error);
                            if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                                // 进行重新登陆
                                localStorage.clear();
                                top.location.href=loginPageUrl;
                            }
                        })
                });
            }
        })
        function getLinkList(){
            axios({
                method: 'get',
                url:microUrl.microObject.idenDbLink.dbLinkList,
                headers:{
                    'Authorization':Authorization
                }
            })
                .then(function (response) {
                    if(response.status == 200 &&response.data.message == "success"){
                        var data = response.data.data;
                        var str = template("template-link-tmpl",{data});
                        document.getElementById("dblink-select").innerHTML = str;
                        form.render('select')
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                        // 进行重新登陆
                        localStorage.clear();
                        top.location.href=loginPageUrl;
                    }
                });
        }
        form.on('submit(subOracleData)', function(data){
            layer.load(2);
            let formData = data.field;
            axios({
                method: 'post',
                data: formData,
                url:microUrl.microObject.idenDbLink.addDbLink,
                headers:{
                    'Authorization':Authorization
                }
            })
                .then(function (res) {
                    if (res.status == 200&&res.data.message=="success") {
                        layer.msg(res.data.message, {icon: 1});
                    } else {
                        layer.msg(res.data.message, {icon: 2});
                    }
                    layer.closeAll('loading');
                })
                .catch(function (error) {
                    console.log(error);
                    if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                        // 进行重新登陆
                        localStorage.clear();
                        top.location.href=loginPageUrl;
                    }
                })
            return false;
        });
        form.render('select')
        form.on('select(dblink-select)', function(data){
            current_link = data.value
        });
        form.on('submit(open-dialog)', function(data){
            showSetMasterSlaveClassModel(data)
            return false;
        });

        /*显示设置主从表弹窗*/
        function showSetMasterSlaveClassModel(link_id) {
            dbLink_id = link_id.field.lianjie
            layui.use(['admin','table'], function () {
                var formSelects = layui.formSelects;
                var $ = layui.jquery;
                var admin = layui.admin;
                var form = layui.form;
                var table = layui.table;
                admin.open({
                    type: 1,
                    title: 'DBLINK导入数据',
                    offset: "auto",
                    area: ['800px', '600px'],
                    content: $('#search-tables').html(),
                    success: function (layero, dIndex) {
                        var req={
                            id:link_id.field.lianjie
                        };
                        axios.get(microUrl.microObject.idenDbLink.searchTables,{
                            params: req,
                            headers:{
                                'Authorization':Authorization
                            }
                        })
                            .then(function (response) {
                                if(response.status == 200 &&response.data.message == "success"){
                                    var data = response.data.data;
                                    var str = template("template-db-tables-tmpl",{data});
                                    document.getElementById("db_tables").innerHTML = str;
                                    form.render('select')
                                }
                            })
                            .catch(function (error) {
                                if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                                    // 进行重新登陆
                                    localStorage.clear();
                                    top.location.href=loginPageUrl;
                                }
                            });
                    }
                });
            })
        }
        form.on('select(db_tables)', function(data){
            tableName = data.value
            renderSelect(data)
        });
        function renderSelect() {
            var req={
                id:dbLink_id,
                tableName:tableName
            };
            axios.get(microUrl.microObject.idenDbLink.searchDbTable,{
                params: req,
                headers:{
                    'Authorization':Authorization
                }
            })
                .then(function (response) {
                    if(response.status == 200 &&response.data.message == "success"){
                        var data = response.data.data;
                        getIdenData();
                        select_arr = data
                    }
                })
                .catch(function (error) {
                    console.log(error)
                    if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                        // 进行重新登陆
                        localStorage.clear();
                        top.location.href=loginPageUrl;
                    }
                });
        }
        //查询指标

        function getIdenData(){
            var req={
                current: current,
                size: 100,
                miid:urlData.miid.id
            };
            axios.get(microUrl.microObject.idenMicroMeta.idenMicroList,{
                params: req,
                headers:{
                    'Authorization':Authorization
                }
            })
                .then(function (response) {
                    if(response.status == 200 &&response.data.message == "success"){
                        var data = response.data.data;
                        renderTable(data.records)
                        allData = data.records
                    }
                })
                .catch(function (error) {
                    console.log(error)
                    if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                        // 进行重新登陆
                        localStorage.clear();
                        top.location.href=loginPageUrl;
                    }
                });
        }


        /*渲染指标管理表格*/
        function renderTable(micro_data) {
            for(let i = 0;i<select_arr.length;i++){
                for(let j = 0;j<micro_data.length;j++){
                    if(select_arr[i].field == micro_data[j].idenCode){
                        micro_data[j].tablefieldName = select_arr[i].field
                    }
                }
            }
            table.render({
                elem: '#getIdenTable',
                // skin:'nob',
                data: micro_data,
                page: false,
                cellMinWidth: 100,
                text:'暂未选择',
                height:'400px',
                cols: [[
                    {type:'numbers', title: '序号'},
                    {field: 'idenCode', align: 'center', title: '序列'},
                    {field: 'idenName', align: 'center', title: '指标'},
                    {align: 'center',field: 'tablefieldName',fixed:'right', title: '映射数据库列表',templet:function (d) {
                        let str = `<div class="select_orcale_box">
                                       <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit" name="tablefieldName">${d.tablefieldName?d.tablefieldName:'请选择'}</a>
                                       <a class="layui-btn layui-btn-danger layui-btn-xs micro-ident-group-delete" lay-event="delete">X</a>
                                    </div>`
                        let delStr =   `<div class="select_orcale_box">
                                       <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit" name="tablefieldName">${d.tablefieldName?d.tablefieldName:'请选择'}</a>
                                    </div>`
                            if(d.tablefieldName){
                                return str
                            }else {
                                return delStr
                            }
                        }}
                ]]
            });

        }
        //创建视图
        form.on('submit(sendView)', function(data){
            let tablefieldName = [];
            let viewfieldName = [];
            $.each(allData,function (index,value) {
                if(value.tablefieldName){
                    tablefieldName.push(value.tablefieldName);
                    viewfieldName.push(value.idenCode)
                }
            })
            let formData = {
                id:dbLink_id,
                mitid:urlData.miid.id,
                tableName:tableName,
                tablefieldName:tablefieldName,
                viewfieldName:viewfieldName
            }
            layer.load(2);
            axios({
                method: 'post',
                data: formData,
                url:microUrl.microObject.idenDbLink.creatView,
                headers:{
                    'Authorization':Authorization
                }
            })
                .then(function (res) {
                    if (res.status == 200&&res.data.message=="success") {
                        layer.msg(res.data.message, {icon: 1});
                    } else {
                        layer.msg(res.data.message, {icon: 2});
                    }
                    layer.closeAll('loading');
                })
                .catch(function (error) {
                    console.log(error);
                    if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                        // 进行重新登陆
                        localStorage.clear();
                        top.location.href=loginPageUrl;
                    }
                })
            return false;
        });
    //    创建关联表
        form.on('submit(sendRelationtable)', function(data){
            let tablefieldName = [];
            let viewfieldName = [];
            $.each(allData,function (index,value) {
                if(value.tablefieldName){
                    tablefieldName.push(value.tablefieldName);
                    viewfieldName.push(value.idenCode)
                }
            })
            let formData = {
                id:dbLink_id,
                mitid:urlData.miid.id,
                tableName:tableName,
                tablefieldName:tablefieldName,
                viewfieldName:viewfieldName
            }
            axios({
                method: 'post',
                data: formData,
                url:microUrl.microObject.idenDbLink.creatRelationtable,
                headers:{
                    'Authorization':Authorization
                }
            })
                .then(function (res) {
                    if (res.status == 200&&res.data.message=="success") {
                        layer.msg(res.data.message, {icon: 1});
                    } else {
                        layer.msg(res.data.message, {icon: 2});
                    }
                    layer.closeAll('loading');
                })
                .catch(function (error) {
                    console.log(error);
                    if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                        // 进行重新登陆
                        localStorage.clear();
                        top.location.href=loginPageUrl;
                    }
                })
            return false;
        });
    });

</script>